window.onload = async () => {
    const loadingTip = addLoadingTip();
    const { spread, designer } = createSpreadAndDesigner();
    const res = await fetch('https://cdn.grapecity.com.cn/spreadjs/report-samples/financial-report.ssjson');
    await spread.fromJSON(await res.json());
    loadingTip.remove();
    if (designer) {
        designer.refresh();
    }
};

function createSpreadAndDesigner() {
    const demoHost = document.getElementById('demo-host');
    if (window !== top) {
        return {
            spread: new GC.Spread.Sheets.Workbook(demoHost, { sheetCount: 1 }),
        };
    } else {
        const designer = new GC.Spread.Sheets.Designer.Designer(demoHost, undefined, undefined, { sheetCount: 1 });
        return {
            designer,
            spread: designer.getWorkbook(),
        };
    }
}
function addLoadingTip() {
    const div = document.createElement('div');
    div.style.position = 'absolute';
    div.style.inset = '0';
    div.style.display = 'flex';
    div.style.alignItems = 'center';
    div.style.justifyContent = 'center';
    div.style.background = 'white';
    div.style.zIndex = '100';
    div.textContent = 'Loading data from server ...';
    document.body.appendChild(div);
    return div;
}

